.progress-content {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    text-align: center;

    .progress {
        .title-box {
            display: flex;
            align-items: center;

            .icon {
                width: 33px;
                height: 29px;
                background-repeat: no-repeat;
                background-size: contain;
            }

            .title {
                font-weight: 400;
                font-size: 15px;
                color: #fff;
            }
        }

        .progress-box {
            display: flex;
            align-items: center;

            .progress-bar {
                box-sizing: border-box;
                margin-right: 20px;

                .progress-bg {
                    box-sizing: border-box;
                    width: 100%;
                    position: relative;
                }

                .progress-up {
                    box-sizing: border-box;
                    position: absolute;
                    left: -1px;
                    animation: progressLoad 2s forwards;

                    .round-box {
                        position: absolute;
                        right: var(--round-width);
                        top: 50%;
                        transform: translateY(-50%);
                        border-radius: 50%;
                        z-index: 1;

                        .round-box1,
                        .round-box2 {
                            border-radius: 50%;
                            animation: fadein 2s linear infinite;
                        }

                        .round-box2 {
                            z-index: 10;
                            background-color: transparent;
                        }
                    }
                }
            }

            .progress-num-box {
                display: flex;
                flex-direction: column;
                align-items: flex-end;

                .progress-num-line {
                    width: 15px;
                    height: 3px;
                    border-radius: 3px;
                }

                .progress-num {
                    color: #fff;
                }
            }
        }
    }
}

/* 进度条动画 */
@keyframes progressLoad {
    0% {
        width: 0%;
    }
    100% {
        width: var(--progress-width);
    }
}

/* 动画 */
@keyframes fadein {
    0% {
        opacity: 0;
    }
    10% {
        opacity: 0.1;
    }
    20% {
        opacity: 0.2;
    }
    30% {
        opacity: 0.3;
    }
    40% {
        opacity: 0.4;
    }
    50% {
        opacity: 0.5;
    }
    60% {
        opacity: 0.4;
    }
    70% {
        opacity: 0.3;
    }
    80% {
        opacity: 0.2;
    }
    90% {
        opacity: 0.1;
    }
    100% {
        opacity: 0;
    }
}
